<template>
    <div style="padding-right: 12px">
      <el-input
          v-model="text"
          prefix-icon="Search"
          clearable
          placeholder="请输入单元名称"
          style="padding-bottom: 10px"
      ></el-input>
      <el-tree
          style="max-width: 600px"
          :data="data"
          ref="treeRef"
          :props="defaultProps"
          :highlight-current="true"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          @node-click="handleNodeClick"
      />
    </div>
</template>

<script setup>
import {reactive, ref, watch} from "vue";
import * as api from '@/api/basic/buildStructure'

    const text = ref('')

    const treeRef = ref();

    watch(text, (val) => {
        treeRef.value.filter(val)
    })

    const init = () => {
        api.getTree().then(res => {
            console.log(res)
            data.push(...res.data)
        })
    }

    init()

    const filterNode = (v,d) => {
      if (!v) return true
      return d.structureName.includes(v)
    }

    const data = reactive([])

    const emit = defineEmits(['transfer'])

    const handleNodeClick = (data) => {
        console.log(data)
        emit('transfer', {structureFullIds: data.structureFullIds})
    }

    const defaultProps = {
      children: 'children',
      label: 'structureName',
    }
</script>

<style scoped>

</style>
